<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>My news_view Page</title>
	<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
	<link rel="stylesheet" href="/css/bootstrap-icons.css" />
	<style>
		body {
			background-color: var(--light);
		}

		header {
			background-color: var(--yellow);
			margin-bottom: 1.25rem;
		}

		footer {
			margin-top: 1.25rem;
			background-color: var(--yellow);
		}

		ul {
			margin: 0;
			padding: 0;
		}

		li {
			list-style-type: none;
		}

		/* 两行省略 */
		.ellipsis_two_lines {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		/* 三行省略 */
		.ellipsis_three_lines {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.article_card .right_block_card {
			background-color: red;
		}

		.article_card {
			padding: 10px 20px 1px 20px;
			background-color: var(--white);
			border-radius: 4px;

		}

		.article_com p {
			text-indent: 2em;
		}

		.article_com img {
			width: 100%;
			height: auto;
		}

		.article_com .img_warp {
			text-indent: 0em;
		}

		.article_com .flex {
			display: flex;
			flex-wrap: wrap;
		}

		.article_com>h4 {
			text-align: center;
			margin-top: .625rem;
			margin-bottom: 1.25rem;
		}

		.article_com .article_dec {
			justify-content: space-evenly;
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 1.25rem;
			color: #a6a6a6;
			font-size: .75rem;
			text-align: center;
		}

		.article_com .article_dec>span {
			padding-right: 1.125rem;
		}

		.article_com .article_com>h4 {
			text-align: center;
		}

		.article_com .copy_right {
			background-color: #eee;
			text-align: center;
			color: #aaa;
			border-radius: 3px;
			margin-top: 1.125rem;
			padding: .1875rem 0;
		}

		.article_com .article_tag {
			margin: 20px 0;
			text-align: left;
			font-size: .875rem;
			line-height: 1.125rem;
		}

		.article_com .article_interaction {
			margin-bottom: 1.875rem;
			text-align: right;
			padding-top: 1.25rem;
			color: .875rem;
		}

		.article_com .article_interaction a {
			display: inline-block;
			cursor: pointer;
			margin-bottom: -0.3125rem;
			margin-right: 1rem;
			opacity: .8;
		}

		.article_com .article_interaction i {
			vertical-align: text-bottom;
		}

		.article_com .article_interaction a:hover {
			opacity: 1;
		}

		.pager {
			margin: 1.25rem 0;
		}

		.pager a {
			display: block;
			max-width: 18rem;
			margin-top: .3125rem;
			max-width: 17rem;
			padding: .3125rem .875rem;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 15px;
			text-decoration: none;
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.pager span {
			max-width: 17rem;
		}
	</style>
	<style>
		/* 右边侧边栏样式 */
		.right_block .cate_title {
			position: relative;
			background-color: #f4f4f4;
			padding: 0.5rem 0.5rem 0.5rem 1.25rem;
		}

		.right_block .cate_title_triangle {
			position: absolute;
			left: -7.5px;
			top: -7.5px;
			width: 0;
			height: 0;
			border: 7.5px solid transparent;
			border-right: 7.5px solid #ffb300;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		.right_block .right_block_list .news_title {
			font-size: 14px;
			cursor: pointer;
		}

		.right_block .right_block_list .news_dec {
			font-size: 13px;
			color: #6c7179;
		}

		.right_block .right_block_list .news_info {
			margin-bottom: 0.2rem;
			font-size: 13px;
			color: #6c7179;
			display: flex;
			justify-content: space-between;
		}

		.right_block .right_block_list .news_info.description {
			margin-top: 0.1rem;
			margin-bottom: 0.2rem;
		}

		/* 重置卡片 */
		.right_block .right_block_list .card {
			border: none;
			position: relative;
		}

		.right_block .right_block_list .card-header {
			border: none;
			background-color: #fff;
		}

		.right_block .right_block_list .card-body {
			padding-top: 0;
			padding-bottom: 0;
			border: none;
		}

		.right_block .right_block_list .bi-stop-circle {
			position: absolute;
			top: 0.625rem;
			left: 0;
			font-size: 0.5rem;
			color: #f5b53f;
			border-radius: 50%;
		}

		.right_block .right_more {
			margin: 20px auto 30px;
			width: 82px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border: 0.5px solid #5d6d94;
			font-size: 12px;
			color: #5d6d94;
		}
	</style>

<body>
	<div id="app">
		<div class="page_news_view" id="news_view_page">
			<header>header
				{{obj}}
				<b>{{prev}}</b>
				<i>{{next}}</i>
			</header>
			<main>
				<div class="wrap">
					<div class="container">
						<div class="row">
							<div class="col-12 col-lg-9">
								<div class="article_card" id="article_card">
									<!-- 文章组件 -->
									<div class="article_com">

										<h4>{{obj.title}}</h4>
										<div class="article_dec">
											<span>作者: {{obj.author}}</span>
											<span>分类: <a href="/article/list?type_id={{obj.type_id}}">{{obj.type_name}}</a> </span>
											<span>
												<a href="#">
													{{obj.num_comment}}条评论
												</a>
											</span>
											<span>浏览({{obj.hits}})</span>
											<span>发布时间：{{toTime(obj.create_time)}}</span>
										</div>
										<div class="article_content">
											<p>&nbsp;</p>
											<p class="img_warp">
												<img src="/img/pic_Article_11.jpg" alt="">
											</p>
											<p>{{obj.content}}</p>
											<p class="copy_right">转载请注明出处我的网站</p>
										</div>

										<div class="article_tag">
											{{each obj.tag o}}
											<span>{{o}}</span>
											{{/each}}
										</div>
										<div class="article_interaction">
											<a href="#"><i class="bi bi-star"></i> 收藏({{obj.num_collect}})</a>
											<a href="#"><i class="bi bi-hand-thumbs-up"></i> 点赞({{obj.num_praise}})</a>
										</div>
									</div>
								</div>
								<div class="pager_card">
									<!-- 换页面组件 -->
									<div class="pager flex clearfix">
										{{if prev.title}}
										<a href="/article/view?article_id={{prev.article_id}}" class="previous float-left"><i
												class="bi bi-arrow-left"></i><span>{{prev.title}}</span></a>
										{{else}}
										<a class="text-secondary previous float-left"><i class="bi bi-arrow-left"></i><span>没有上一条</span></a>
										{{/if}}
										{{if next.title}}
										<a href="/article/view?article_id={{next.article_id}}" class="next float-right"><i
												class="bi bi-arrow-right float-right"></i><span>{{next.title}}</span></a>
										{{else}}
										<a class="text-secondary next float-right"><i
												class="bi bi-arrow-right float-right"></i><span>没有下一条</span></a>
										{{/if}}
									</div>
								</div>

							</div>
							<!-- 右侧边-栏 -->
							<div class="col-lg-3 d-none d-lg-block">
								<div class="right_block_card">
									<div class="right_block">
										<!-- 热点推荐 -->
										<div class="right_list">
											<div class="right_list_item">
												<!-- 侧边栏标题 -->
												<div class="cate_title">
													<div class="cate_title_triangle"></div>
													<h5 class="mb-0">热点推荐</h5>
												</div>
												<!-- 侧边栏列表 -->
												<div class="right_block_list">
													<ul id="accordion">
														{{each hot_list o i}}
														<li>
															<div class="accordion">
																<div class="card">
																	<div class="card-header" id="headingOne">
																		<h2 class="mb-0">
																			<i class="bi bi-stop-circle"></i>
																			<div class="news_title ellipsis_two_lines" data-toggle="collapse"
																				data-target="{{'#collapseOne_'+i}}">{{o.title}}
																			</div>
																		</h2>
																	</div>
																	<div class="card-body">
																		<div id="{{'collapseOne_'+i}}" class="collapse" data-parent="#accordion">
																			<div class="news_dec news_title ellipsis_two_lines">
																				<a href="/article/view?article_id={{o.article_id}}">{{o.description}}</a>
																			</div>
																		</div>
																		<div class="news_info">
																			<span class="publish_time">
																				{{toTime(o.create_time)}}
																			</span>
																			<span class="">
																				<a class="text-reset" href="">{{o.author}}</a>
																			</span>
																		</div>
																	</div>
																</div>
															</div>
														</li>
														{{/each}}
													</ul>
												</div>
												<!-- 侧边栏尾部 -->
												<a href="/article/list?orderby=hits desc">
													<div class="right_more">查看更多</div>
												</a>
											</div>
										</div>
										<!-- 分类列表 -->
										<div class="right_list">
											<div class="right_list_item">
												<!-- 侧边栏标题 -->
												<div class="cate_title">
													<div class="cate_title_triangle"></div>
													<h5 class="mb-0">分类</h5>
												</div>
												<!-- 侧边栏列表 -->
												<div class="right_block_list">
													<ul>
														{{each article_type o i}}
														<li>
															<div class="accordion">
																<div class="card">
																	<div class="card-header" id="headingOne">
																		<h2 class="mb-0">
																			<i class="bi bi-stop-circle"></i>
																			<div class="news_title ellipsis_two_lines"><a
																					href="/article/list?type_id={{o.type_id}}" class="text-dark">{{o.name}}</a>
																			</div>
																		</h2>
																	</div>
																</div>
															</div>
														</li>
														{{/each}}
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
			<footer>footer</footer>
		</div>
	</div>
	<script src="/js/jquery.slim.min.js"></script>
	<script src="/js/bootstrap.bundle.min.js"></script>
</body>

</head>